<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="business-map__data">
    <div class="model-name">
      模型名称：{{ props.modelName }}
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane v-for="item in props.versionList" :label="item.versionNumber" :name="item.modelId" :key="item.modelId"></el-tab-pane>
    </el-tabs>
    <MaterialDetail
      v-if="dataAssetType == 'tree' && refresh"
      heightClass="map_result_height"
      :notInitRequest="true"
      :treeResult="treeResult"
      :canEdit="false"
      :modelId="activeName"
    />
    <div v-else-if="dataAssetType == 'table' && refresh" class="asset-table">
      <el-table :data="assetTableData" border>
        <el-table-column v-for="td in filterTableColumns(assetTableData[0])" :key="td._index" :label="td.chinese + '(' + td.field + ')'" :prop="td.field" min-width="150" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row[td._index]['data'] || '' }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagenation">
        <pagination
          v-show="total > 0"
          style="margin-top: 0;height: 38px;"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          :background="false"
          layout="total, sizes, prev, pager, next, jumper"
          @pagination="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup name="BusinessMapData">
import MaterialDetail from '@/views/material/component/MaterialDetail.vue';
import { getMaterialDataList } from '@/api/material';
import {
  getAssetDataList
} from '@/api/material/index.ts';
const props = defineProps(['modelId', 'versionList', 'modelName']);
const loading = ref(false);
const tableData = ref([]);
const fieldList = ref([])
const rowData = ref({});
const activeName = ref(props.modelId);
const showMaterialDetail = ref(false);
const hasModelField = ref(false);
const tableName = ref('');
const dataList = ref([]);
const dataAssetType = ref('');
const assetTableData = ref([]);
const total = ref(0);
const refresh = ref(false);
const queryParams = ref({
  pageNum: 1, 
  pageSize: 10,
});
const handleCurrentChange = () => {
  getList(activeName.value);
}
const filterTableColumns = (cols) => {
  cols.forEach((item, index) => {
    item._index = index;
  })
  return cols.filter(col => col?.type !== 'info');
}
const handleEvent = (prop) => {
  showMaterialDetail.value = false;
}
const handleClick = (tab, event) => {
  queryParams.value.pageNum = 1;
  getList(tab.paneName);
}
const getList = (modelId) => {
  let params = {
    ...queryParams.value,
    modelId: modelId
  }
  loading.value = true;
  refresh.value = false;
  getAssetDataList(params).then(res => {
    if (res) {
      dataAssetType.value = res.data.showType;
      if (res.data.showType == 'tree') {
        treeResult.value = res.data?.treeResult;
      } else if (res.data.showType == 'table') {
        assetTableData.value = res.data?.tableResult?.contentData || [];
        total.value = res.data?.tableResult?.totalSize || 0;
      }
    }
  }).catch(() => {
    loading.value = false;
    refresh.value = true;
  }).finally(() => {
    loading.value = false;
    refresh.value = true;
  })
}
onMounted(() => {
  props.modelId && getList(props.modelId);
});
</script>
<style lang="less" scoped>
.business-map__data {
  .pagenation {
    display: flex;
    justify-content: end;
    padding-top: 10px;
  }
}
</style>